<template>
    <div>
        <div class="wrap">
            <header style="">
                <div class="title">
                {{markdownOptions.title}}
                </div>
                <div class="author">
                    <span>{{markdownOptions.author}}</span>
                    <span>{{markdownOptions.time}}</span>
                </div>
            </header>
            <div class="mavonEditor" style="text-align:left">
                <v-md-editor v-model="markdownOptions.content"  mode="preview"  @copy-code-success="handleCopyCodeSuccess"></v-md-editor>
            </div>
        </div>
    </div>
</template>

<script>
    // import { transformTimestamp } from "@/util/transformDate"
    import { selectById } from "@/api/article/index"
    import { defineComponent, onMounted, reactive, ref, watch, components } from 'vue';
    import { message } from 'ant-design-vue';
    import {useRoute} from 'vue-router';



    export default defineComponent({

        setup (){

            const route = useRoute();
            const markdownOptions = ref({});


            /**
             * 展示
             * */
            const showArticle = () => {
                let id = route.query.id;
                if(!id) return message.error("id为空");
                selectById({id}).then(res=>{
                    console.log(res);
                    // res.list.time = transformTimestamp(res.list.time);

                    markdownOptions.value = res.list;
                })
            };

            const  handleCopyCodeSuccess = (code) => {
                // console.log(code)
                message.success("复制成功")
            };


            onMounted(showArticle);


            watch(()=>{

            });




            return {
                markdownOptions,
                showArticle,
                handleCopyCodeSuccess

            }
        }
    })
</script>

<style lang="scss">
    .wrap{
        background-color: #ddd;
        /*background-image: url('../../../assets/img/bg.jpg');*/
        background-size: contain;
        padding-bottom: 50px;
    }
    .mavonEditor{
      width: 100%;
    }
    img{
        max-height:300px;
        display: block;
    }

    header{
        padding-top:20px;
        height: 100px;
        text-align: left;
        background-color: white;
        margin-bottom: 2px;

        div{
           height: 35px;
            line-height: 35px;
            padding-left:50px;
        }

        .title{
            font-size: 21px;
            font-weight: bold;
        }

        .author{
            background-color: #e6f7ff;
            line-height: 30px;

            span{
                display: inline-block;
                margin-left:20px
            }

        }
    }

</style>




